<template>
  <div class="count-bar">
    <div class="count-bar-content">
        <div class="block1 flex-row">
            <div class="bd1 flex-col justify-center">
              <Input placeholder="搜索关键词，例：舰艇拖带" size="large" search></Input>
<!--                <div class="layer4 flex-row justify-between">-->
<!--                    <span class="txt3">搜索关键词，例：舰艇拖带</span>-->
<!--                    <img-->
<!--                        class="icon1"-->
<!--                        referrerpolicy="no-referrer"-->
<!--                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf30451495c9b8df5f6eaf6ff2917d3490fcbf4586f7b1ce71811cbc71ec5a9b8"-->
<!--                    />-->
<!--                </div>-->
            </div>
            <span class="txt4">保障任务</span> <span class="info4">2,910</span>
            <span class="info5">工程建设</span> <span class="info6">2,910</span>
            <span class="word6">运维设施</span> <span class="word7">2,910</span>
        </div>
      <!--<div class="count-bar-item" v-for="(item, index) in dataList" :key="index">-->
        <!--<p class="cb-item-number"> {{item.data}} </p>-->
        <!--<p class="cb-item-label">{{item.desc}}</p>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "StateData",
    data() {
      return {
        searchKey: '',
        dataList: [
          {
            data: '16,209',
            desc: '任务数量'
          },
          {
            data: '4,521',
            desc: '工程数量'
          },
          {
            data: '572',
            desc: '运维数量'
          }
        ]
      }
    },
    methods: {
      createTask() {
        this.$router.push({
          path: '/operate'
        })
      },
      createProject() {
        this.$router.push({
          path: '/operate-engine'
        })
      },
      searchData() {
        if (this.searchKey.length > 0) {
          this.$router.push({name: 'hospital'});
          return;
        }
        switch (this.searchKey) {
          case '医疗保障模块':
            this.$router.push({
              path: '/hospital'
            })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.ivu-input {
  border: none !important;
}
  .large-btn {
    width: 170px;
  }
  .small-btn {
    width: 120px;
    color: #FFFFFF;
  }
  .border-btn {
    border: 1px solid rgb(64, 158, 255);
    color: rgb(64, 158, 255);
  }
  .cuts-btn {
    height: 55px;
    padding: 0 20px;
    text-align: center;
    line-height: 55px;
    margin-top: 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 1px;
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .25);
  }
  .count-bar {
    position: absolute;
    width: 100%;
    z-index: 1;
    background-color: rgba(240,240,240, 0.85);
    bottom: 0;
    padding: 15px 0;
    .count-bar-content {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      .search-input {
        display: flex;
        justify-content: center;
        width: 600px;
        min-height: 100px;
        .cuts-input {
          padding: 0 5px;
          width: 500px;
          height: 55px;
          margin-top: 20px;
          outline: none;
          font-size: 16px;
          border: 1px solid #FFFFFF;
          input {
            color: #b1b1b1;
          }
        }
      }
      .btn-list {
        width: 400px;
        height: 80px;
        line-height: 80px;
        display: flex;
        /*justify-content: space-between;*/
      }
      .count-bar-item {
        position: relative;
        width: 200px;
        min-height: 100px;
        line-height: 60px;
        &:nth-child(2)::before {
          content: '';
          position: absolute;
          top: 15px;
          height: calc(100% - 22px * 2);
          width: 1px;
          background: rgba(0, 0, 0, 0.06);
          left: 0;
        }
        &:nth-child(2)::after {
          content: '';
          position: absolute;
          top: 15px;
          height: calc(100% - 22px * 2);
          width: 1px;
          background: rgba(0, 0, 0, 0.06);
          right: 0;
        }
        .cb-item-number {
          font-size: 24px;
          font-weight: 600;
          text-align: center;
          color: #FFFFFF;
          line-height: 60px;
          word-break: break-all;
          display: block;
        }
        .cb-item-label {
          font-size: 12px;
          text-align: center;
          color: rgba(255, 255, 255, 0.45);
          line-height: 1px;
        }
      }
    }
  }
</style>

<style scoped src="../../home/index.css"></style>
<style scoped src="../../home/common.css"></style>
